<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import result from "@/utils/mapValue/cq2.json";
import result1 from "@/utils/mapValue/zcq.json";

import { useUserStore } from "../../../stores/user";
import { event_details, event_info } from "../../../api";
import IncidentDialog from "./components/incidentDialog.vue";

import { ElMessage } from "element-plus";
import { useAiStore } from "@/stores/aiStore";
import AiDialog from "./components/AiDialog.vue";

const dataStore = useUserStore();
const aiDataStore = useAiStore();
var mapName = "result";
const showP = ref("市级");
const aiVisible = ref(false);
const EraYVisible = ref(true);
const myChart1 = ref();
const showData = ref({
  item1: "51.89",
  item2: "48.88",
  item3: "58",
  item4: "94.20",
  item5: "42055.29",
  item6: "100",
});



const geoCoordMap = {
  渝中区: [106.575354, 29.558923],
  万州区: [108.380246, 30.807807],
  武隆区: [107.75655, 29.32376],
  綦江区: [106.651417, 29.028091],
  巫山县: [109.878928, 31.074843],
};
const data = [
  { name: "万州区", value: 20 },
  { name: "綦江区", value: 67 },
  { name: "大足区", value: 80 },
  { name: "渝北区", value: 90 },
  { name: "巴南区", value: 20 },
  { name: "黔江区", value: 96 },
  { name: "长寿区", value: 85 },
  { name: "江津区", value: 85 },
  { name: "合川区", value: 85 },
  { name: "永川区", value: 85 },
  { name: "南川区", value: 85 },
  { name: "涪陵区", value: 95 },
  { name: "璧山区", value: 85 },
  { name: "铜梁区", value: 85 },
  { name: "潼南区", value: 85 },
  { name: "荣昌区", value: 85 },
  { name: "开州区", value: 85 },
  { name: "梁平区", value: 85 },
  { name: "武隆区", value: 85 },
  { name: "城口县", value: 85 },
  { name: "丰都县", value: 85 },
  { name: "垫江县", value: 85 },
  { name: "渝中区", value: 85 },
  { name: "忠县", value: 85 },
  { name: "云阳县", value: 85 },
  { name: "奉节县", value: 85 },
  { name: "巫山县", value: 18 },
  { name: "巫溪县", value: 85 },
  { name: "石柱土家族自治县", value: 85 },
  { name: "秀山土家族苗族自治县", value: 85 },
  { name: "酉阳土家族苗族自治县", value: 85 },
  { name: "彭水苗族土家族自治县", value: 85 },
  { name: "两江新区", value: 85 },
  { name: "大渡口区", value: 85 },
  { name: "万盛经济技术开发区", value: 85 },
  { name: "高新技术产业开发区", value: 85 },
  { name: "江北区", value: 85 },
  { name: "沙坪坝区", value: 20 },
  { name: "九龙坡区", value: 95 },
  { name: "南岸区", value: 85 },
  { name: "北碚区", value: 60 },
];

const convertData = data.map((item) => {
  const coord = geoCoordMap[item.name]; // 取出地区的经纬度
  if (coord) {
    return {
      name: item.name,
      value: [...coord, item.value], // 合并 [经度, 纬度, 在线教学使用人次]
    };
  }
  return item;
});

const data1 = [
  { name: "渝北区", value: 200 },
  { name: "巴南区", value: 200 },
  { name: "渝中区", value: 200 },
  { name: "大渡口区", value: 200 },
  { name: "江北区", value: 234 },
  { name: "沙坪坝区", value: 200 },
  { name: "九龙坡区", value: 200 },
  { name: "南岸区", value: 285 },
  { name: "北碚区", value: 229 },
];

const convertData1 = data1.map((item) => {
  const coord = geoCoordMap[item.name];
  if (coord) {
    return {
      name: item.name,
      value: [...coord, item.value],
    };
  }
  return item;
});

onMounted(() => {
  initss();
  initss1();
  getevent_details();
  if (dataStore.userType !== "02") {
  }
});

// 大地图
const initss = () => {
  const dom = document.getElementById("container");
  dom.removeAttribute("_echarts_instance_");
  const myChart = echarts.init(dom);
  myChart1.value = myChart;
  myChart.showLoading();
  echarts.registerMap("result", result);
  myChart.hideLoading();
  const option = {
    tooltip: {
      formatter: function (params) {
        // console.log(params);
        showP.value = params.name;

        showData.value = {
          item1: "--",
          item2: "--",
          item3: "--",
          item4: "--",
          item5: "--",
          item6: "--",
        };
        // return `<div style="padding: 2vw;">${params.name}<p>在线教学使用人次:${
        //   typeof params.value === "number" ? params.value : params.value[2]
        // }</p>\n</div>`;
        return `<div style="padding: 2vw;">${params.name}</div>`;
      },
      backgroundColor: "rgba(50,50,50,0.7)",
      borderColor: "#333",
      padding: [5, 10],
      textStyle: {
        color: "#fff",
        fontSize: "16",
      },
    },
    geo: [
      {
        layoutCenter: ["50%", "50%"], //位置
        layoutSize: "230%", //大小
        show: true,
        map: mapName,
        // emphasis: {
        //   disabled:false
        // },
        select: {
          itemStyle: {
            areaColor: "red",
            borderColor: "#0CDEFF",
            borderWidth: 3,
          },
          label: {
            color: "#fff",
          },
        },
        roam: false,
        zoom: 0.55,
        aspectScale: 1.1,

        label: {
          color: "#fff",
          normal: {
            show: false,
            textStyle: {
              color: "#fff",
            },
          },
          emphasis: {
            show: true,
            textStyle: {
              color: "#000",
            },
          },
        },
        itemStyle: {
          normal: {
            areaColor: {
              type: "linear",
              x: 1200,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                // {
                //   offset: 0,
                //   color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                // },
                // {
                //   offset: 1,
                //   color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                // },
              ],
              global: true, // 缺省为 false
            },
            borderColor: "#c0f3fb",
            borderWidth: 1,
            // shadowColor: "#8cd3ef",
            shadowColor: "#91e9fc",
            //  shadowColor: "#1a416a",
            shadowOffsetY: 0.5,
            shadowBlur: 0.5,
          },
          emphasis: {
            // areaColor: "rgba(0,254,233,0.6)",                 //鼠标覆盖背景色
            areaColor: "rgba(255,255,255,0.8)",
          },
        },
      },
    ],
    visualMap: {
      type: "piecewise",
      seriesIndex: 0,
      textStyle: {
        color: "#ffffff",
      },
      // right:0,
      selectedMode: false,
      // show: false,
      pieces: [
        { min: 0, max: 59.9, label: "0-59.9", color: "#B04332" }, //
        { min: 60, max: 84.9, label: "60-84.9", color: "#E49317" }, //
        { min: 85, max: 94.9, label: "85-94.9", color: "#3877B2" }, //
        { min: 95, max: 100, label: "95-100", color: "#1AA76C" },
        // 注意：这里的min和max值应该根据你的实际数据范围来设置
      ],
      // 可选配置，如果你的地图数据值需要被映射到这些颜色区间
      // inRange: {
      //     color: ['lightgrey', 'grey'] // 默认颜色的区间，可选
      // },
      // outOfRange: {
      //     color: '#999' // 超出范围的颜色，可选
      // }
    },
    series: [
      {
        type: "map",
        map: mapName,
        geoIndex: 0,
        aspectScale: 1.2, //长宽比
        zoom: 0.5,
        showLegendSymbol: true,
        roam: true,
        label: {
          normal: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: "120%",
            },
          },
          emphasis: {
            // show: false,
          },
        },
        itemStyle: {
          normal: {
            areaColor: {
              type: "linear",
              x: 1200,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                // {
                //   offset: 0,
                //   color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                // },
                // {
                //   offset: 1,
                //   color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                // },
              ],
              global: true, // 缺省为 false
            },
            borderColor: "#fff",
            borderWidth: 0.2,
          },
        },
        layoutCenter: ["50%", "50%"],
        layoutSize: "180%",
        animation: false,
        markPoint: {
          symbol: "none",
        },
        data: data,
        selectedMode: "single",
        select: {
          itemStyle: {
            areaColor: "red",
            borderColor: "#0CDEFF",
            borderWidth: 3,
          },
          label: {
            color: "#fff",
          },
        },
        emphasis: {
          itemStyle: {
            areaColor: "red", // 可选：设置高亮时的颜色
          },
        },
      },
      // {
      //   name: "空中课堂",
      //   type: "scatter", // 普通散点图，无动态效果
      //   coordinateSystem: "geo", // 依赖 geo 地图
      //   symbol: "circle", // 圆形标点
      //   symbolSize: 12,
      //   itemStyle: {
      //     color: "#FF292F", // 红色标点
      //     shadowBlur: 6,
      //     shadowColor: "rgba(255,134,134,0.8)",
      //     shadowOffsetX: 0,
      //     shadowOffsetY: 0,
      //   },
      //   data: convertData, // 传入转换后的数据
      // },
    ],
  };
  myChart.setOption(option);
  // myChart.on("click", async (params) => {
  //   console.log(params);
  //   showP.value = params.name;
  //   initss1();
  // });
  myChart.on("mouseout", function (params) {
    showP.value = "市级";

    showData.value = {
      item1: "51.89",
      item2: "48.88",
      item3: "58",
      item4: "94.20",
      item5: "42055.29",
      item6: "100",
    };
  });
};

// 小地图
const initss1 = () => {
  const dom = document.getElementById("box2_c3_map");
  dom.removeAttribute("_echarts_instance_");
  const myChart = echarts.init(dom);
  myChart.showLoading();
  echarts.registerMap("result", result1);
  myChart.hideLoading();
  const option = {
    // title: {
    //   show: true,
    //   text: "中心城区",
    //   textStyle: {
    //     color: "#C9E9F8",
    //   },
    // },
    tooltip: {
      formatter: function (params) {
        // console.log(params);
        showP.value = params.name;

        showData.value = {
          item1: "--",
          item2: "--",
          item3: "--",
          item4: "--",
          item5: "--",
          item6: "--",
        };
        // return `<div style="padding: 2vw;">${params.name}<p>在线教学使用人次:${
        //   typeof params.value === "number" ? params.value : params.value[2]
        // }</p>\n</div>`;
        return `<div style="padding: 2vw;">${params.name}</div>`;
      },
      backgroundColor: "rgba(50,50,50,0.7)",
      borderColor: "#333",
      padding: [5, 10],
      textStyle: {
        color: "#fff",
        fontSize: "16",
      },
    },
    geo: [
      {
        layoutCenter: ["50%", "40%"], //位置
        layoutSize: "230%", //大小
        show: true,
        map: mapName,
        select: {
          itemStyle: {
            areaColor: "red",
            borderColor: "#0cdeff",
            borderWidth: 3,
          },
        },
        roam: true,
        zoom: 0.4,
        aspectScale: 1.2,
        label: {
          color: "#fff",
          normal: {
            show: false,
            textStyle: {
              color: "#fff",
            },
          },
          emphasis: {
            show: true,
            textStyle: {
              color: "#000",
            },
          },
        },
        itemStyle: {
          normal: {
            areaColor: {
              type: "linear",
              x: 1200,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                },
              ],
              global: true, // 缺省为 false
            },
            borderColor: "#c0f3fb",
            borderWidth: 1,
            shadowColor: "rgba(129, 196, 226,.5)",
            shadowOffsetY: 0.5,
            shadowBlur: 0.5,
          },
          emphasis: {
            // areaColor: "rgba(0,254,233,0.6)",                 //鼠标覆盖背景色
            areaColor: "rgba(255,255,255,0.8)",
            // borderWidth: 0
          },
        },
      },
    ],
    visualMap: {
      type: "piecewise",
      seriesIndex: 0,
      textStyle: {
        color: "#ffffff",
      },
      show: false,
      pieces: [
        { min: 0, max: 59.9, label: "0-59.9", color: "#B04332" }, //
        { min: 60, max: 84.9, label: "60-84.9", color: "#E49317" }, //
        { min: 85, max: 94.9, label: "85-94.9", color: "#3877B2" }, //
        { min: 95, max: 100, label: "95-100", color: "#1AA76C" },
        // 注意：这里的min和max值应该根据你的实际数据范围来设置
      ],
      // 可选配置，如果你的地图数据值需要被映射到这些颜色区间
      // inRange: {
      //     color: ['lightgrey', 'grey'] // 默认颜色的区间，可选
      // },
      // outOfRange: {
      //     color: '#999' // 超出范围的颜色，可选
      // }
    },
    series: [
      {
        type: "map",
        map: mapName,
        geoIndex: 0,
        aspectScale: 1.2, //长宽比
        zoom: 0.5,
        showLegendSymbol: true,
        roam: true,
        label: {
          normal: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: "120%",
            },
          },
          emphasis: {
            // show: false,
          },
        },
        itemStyle: {
          normal: {
            areaColor: {
              type: "linear",
              x: 1200,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                },
              ],
              global: true, // 缺省为 false
            },
            borderColor: "#fff",
            borderWidth: 0.2,
          },
        },
        layoutCenter: ["50%", "50%"],
        layoutSize: "180%",
        animation: false,
        markPoint: {
          symbol: "none",
        },
        data: data,
      },
      // {
      //   name: "空中课堂",
      //   type: "scatter", // 普通散点图，无动态效果
      //   coordinateSystem: "geo", // 依赖 geo 地图
      //   symbol: "circle", // 圆形标点
      //   symbolSize: 12,
      //   itemStyle: {
      //     color: "#FF292F", // 红色标点
      //     shadowBlur: 6,
      //     shadowColor: "rgba(255,134,134,0.8)",
      //     shadowOffsetX: 0,
      //     shadowOffsetY: 0,
      //   },
      //   data: convertData1, // 传入转换后的数据
      // },
    ],
  };
  myChart.setOption(option);

  myChart.on("mouseout", function (params) {
    showP.value = "市级";

    showData.value = {
      item1: "51.89",
      item2: "48.88",
      item3: "58",
      item4: "94.20",
      item5: "42055.29",
      item6: "100",
    };
  });
};

const tableData = ref([]);

const getevent_details = async () => {
  await event_details({}).then((res) => {
    if (res.code == 200) {
      tableData.value = res.data;
    }
  });
};

const gxp1show = ref(false);
const xqca = ref();
const goDKdetails = (v) => {
  console.log(v, "yyyy");
  // xqca.value = v
  event_info({ eventType: "720152", eventNum: v.eventNum }).then((res) => {
    console.log(res, "yuwang res");
    if (res.code == 200) {
      xqca.value = res.data[0] || {};
    }
  });
  gxp1show.value = true;
};

const godd = (v) => {
  // event_info({ eventType: "720152", eventNum: v.eventNum }).then((res) => {
  //   console.log(res, "yuwang res");
  //   if (res.code == 200) {
  //     ElMessage({
  //       message: `已通知-${res.data?.[0]?.orgName || ""}、${
  //         res.data?.[0]?.opCtyInfo?.[0]?.orgName || ""
  //       }、${
  //         res.data?.[0]?.opCtyInfo?.[0]?.opSchInfo?.[0].orgName || ""
  //       }-相关处置人员。`,
  //       type: "success",
  //       plain: true,
  //     });
  //   }
  // });

  dd.ready(() => {
    let account = ["979020", "979019"];
    window.location.href = `taurusykz://taurusclient/action/avmeeting/conferenceCreateByIds?title=测试会议名称&isVideoConference=false&calleeStaffIds=${account}`;
    dd.createVideoMeeting({
      title: "会议名称",
      calleeStaffIds: ["979020", "979019"],
    }).then((res) => {
      console.log(res, "会议创建成功");
    });
  });
};
</script>

<template>
  <div class="info">
    <div class="box1">
      <div class="box1_letf"></div>
      <div class="box1_centre">
        <div class="box1_centre_tit">
          <div class="box1_centre_tit_c1">关键绩效指标（KPI）</div>
          <div class="box1_centre_tit_c">{{ showP }}</div>
        </div>
        <div class="box1_centre_c">
          <div class="box1_centre_c_c">
            <div class="box1_centre_c_c_img box1_centre_c_c_img_bg2">
              <img src="@/assets/images/kpi_item1.png" alt="" />
            </div>
            <div class="box1_centre_c_c_canter">
              <div class="box1_centre_c_c_canter_tit text-c9-65-14">
                智慧教育平台应用覆盖率
              </div>
              <div class="box1_centre_c_c_canter_num">
                <span class="text-4b-20">44.7</span
                ><span class="text-c9-75-12">%</span>
              </div>
            </div>
          </div>

          <div class="box1_centre_c_c">
            <div class="box1_centre_c_c_img box1_centre_c_c_img_bg1">
              <img src="@/assets/images/kpi_item3.png" alt="" />
            </div>
            <div class="box1_centre_c_c_canter">
              <div class="box1_centre_c_c_canter_tit text-c9-65-14">学校数量</div>
              <div class="box1_centre_c_c_canter_num">
                <span class="text-4b-20">9772</span
                ><span class="text-c9-75-12">所</span>
              </div>
            </div>
          </div>

          <div class="box1_centre_c_c">
            <div class="box1_centre_c_c_img box1_centre_c_c_img_bg3">
              <img src="@/assets/images/kpi_item2.png" alt="" />
            </div>
            <div class="box1_centre_c_c_canter">
              <div class="box1_centre_c_c_canter_tit text-c9-65-14">
                数据归集
              </div>
              <div class="box1_centre_c_c_canter_num">
                <span class="text-4b-20">6220</span
                ><span class="text-c9-75-12">万条</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box1_r"></div>
    </div>
    <div class="box2">
      <div class="map" id="container"></div>
      <div class="box2_c1">
        <!-- <div class="box2_c1_c"></div>
        <div class="text-c9-55-14">空中课堂</div> -->
      </div>
      <div class="box2_c2">
        <div class="box2_c2_tit">处置率(%)</div>
      </div>
      <div class="box2_c3">
        <div class="box2_c3_tit">中心城区</div>
        <div class="box2_c3_map" id="box2_c3_map"></div>
      </div>
      <div class="box2_AI" @click="aiVisible = true">
        <img src="@/assets/images/AI_d.png" alt="" />
      </div>
    </div>
    <div class="box3">
      <div class="tit">
        <!-- <div class="tit_c">
          <div class="text-c9-65-12">办件量</div>
          <div class="text-gray-16 mr-1 ml-2">34</div>
          <div class="text-opacity-c9-55-12">件</div>
        </div>
        <div class="tit_c">
          <div class="text-c9-65-12">处置中</div>
          <div class="text-yellow-16 mr-1 ml-2">1</div>
          <div class="text-opacity-c9-55-12">件</div>
        </div>
        <div class="tit_c">
          <div class="text-c9-65-12">已办理</div>
          <div class="text-green-16 mr-1 ml-2">33</div>
          <div class="text-opacity-c9-55-12">件</div>
        </div> -->
      </div>
      <div class="box3_c">
        <vue3-seamless-scroll
          :list="tableData"
          :hover-stop="true"
          :step="0.3"
          hover="true"
        >
          <div class="box3_c_c" v-for="(item, index) in tableData" :key="index">
            <div class="text-c9-65-14 flex-1">{{ item.eventTitle }}</div>
            <div class="box3_c_c_c">
              <div class="text-opacity-c9-55-12">{{ item.happenTime }}</div>
              <div
                :class="
                  item.state === '已办结' ? 'btm_c_green' : 'btm_c_yellow'
                "
              >
                <el-tag size="small">{{ item.state }}</el-tag>
              </div>

              <div class="box3_c_c_c_btn">
                <div class="cursor-pointer" @click="goDKdetails(item)">
                  查看
                </div>
                <!-- v-show="item.state == '未办结' ? true : false" -->
                <div style="color: rgba(201, 233, 248, 0.6)"></div>
                <!-- v-show="item.state == '未办结' ? true : false" -->
                <div
                  class="cursor-pointer"
                  @click="godd(item)"
                  :class="{ op: item.state == '未办结' ? false : true }"
                >
                  调度
                </div>
              </div>
            </div>
          </div>
        </vue3-seamless-scroll>
      </div>
    </div>

    <IncidentDialog
      :visible="gxp1show"
      :title="'事件详情'"
      :thead="thead"
      :data="xqca"
      @close="
        () => {
          gxp1show = false;
        }
      "
    ></IncidentDialog>

    <AiDialog
      :visible="aiVisible"
      title="对话框"
      @close="aiVisible = false"
    ></AiDialog>
  </div>
</template>

<style lang="less" scoped>
@import "./index.less";
.op {
  opacity: 0;
}
::v-deep .btm_c_yellow {
  .el-tag.el-tag--primary {
    background: rgba(244, 171, 50, 0.2);
    border-radius: 0.125rem;
    border: 1px solid #f4ab32;
    color: #ffffff;
    // min-width: 4rem;
  }
}

::v-deep .btm_c_green {
  .el-tag.el-tag--primary {
    background: rgba(51, 220, 25, 0.2);
    border-radius: 0.125rem;
    border-color: #33dc19;
    color: #ffffff;
  }
}
</style>
